import { IDictionaries, UserInfo } from "@/service/type";
import { View, Text, Textarea, Input, BaseEventOrig } from "@tarojs/components";
import { FC } from "react";
import { AtButton } from "taro-ui";
import styles from "./index.module.less";
import Form, { Field, FormInstance } from "rc-field-form";
import { Keys } from "../../useData";
import { validateErrorHandler } from "@/utils/validate";
interface IProps {
  form: FormInstance<UserInfo>;
  userInfo: Partial<UserInfo>;
  onSave: (data: Partial<UserInfo>) => void;
  onShowDrawerPanel: (name: Keys, type: IDictionaries) => void;
}

const TargetCondition: FC<IProps> = (props) => {
  const { form, userInfo, onSave, onShowDrawerPanel } = props;

  return (
    <Form
      className={styles["condition-wrapper"]}
      form={form}
      component="view"
      initialValues={{
        ...userInfo.customerSpousePreference,
      }}
      onFinishFailed={validateErrorHandler}
      onFinish={() =>
        onSave({
          customerSpousePreference: {
            ...userInfo.customerSpousePreference,
            ...form.getFieldsValue(),
          },
        })
      }
    >
      <View className={styles["label-wrapper"]}>
        <View className={styles["label"]}>年龄要求</View>
        <View className={styles["input-wrapper"]}>
          <Field
            name="minAge"
            rules={[{ required: true, message: "请输入最低年龄" }]}
            trigger="onInput"
          >
            <Input
              className={styles["input"]}
              type="number"
              placeholder="最低年龄"
            />
          </Field>
          <Text className={styles["tt"]}>-</Text>
          <Field
            name="maxAge"
            rules={[{ required: true, message: "请输入最高年龄" }]}
            trigger="onInput"
          >
            <Input
              className={styles["input"]}
              type="number"
              placeholder="最高年龄"
            />
          </Field>
          <Text className={styles["tt"]}>岁</Text>
        </View>
      </View>

      <View className={styles["label-wrapper"]}>
        <View className={styles["label"]}>身高要求</View>
        <View className={styles["input-wrapper"]}>
          <Field
            name="minHeight"
            rules={[{ required: true, message: "请输入最低身高" }]}
            trigger="onInput"
          >
            <Input
              className={styles["input"]}
              type="number"
              placeholder="最低身高"
            />
          </Field>
          <Text className={styles["tt"]}>-</Text>
          <Field
            name="maxHeight"
            rules={[{ required: true, message: "请输入最高身高" }]}
            trigger="onInput"
          >
            <Input
              className={styles["input"]}
              type="number"
              placeholder="最高身高"
            />
          </Field>
          <Text className={styles["tt"]}>cm</Text>
        </View>
      </View>

      <View className={styles["label-wrapper"]}>
        <View className={styles["label"]}>体重要求</View>
        <View className={styles["input-wrapper"]}>
          <Field
            name="minWeight"
            rules={[{ required: true, message: "请输入最低体重" }]}
            trigger="onInput"
          >
            <Input
              className={styles["input"]}
              type="number"
              placeholder="最低体重"
            />
          </Field>
          <Text className={styles["tt"]}>-</Text>
          <Field
            name="maxWeight"
            rules={[{ required: true, message: "请输入最高体重" }]}
            trigger="onInput"
          >
            <Input
              className={styles["input"]}
              type="number"
              placeholder="最高体重"
            />
          </Field>
          <Text className={styles["tt"]}>kg</Text>
        </View>
      </View>

      <AtButton className={styles["btn"]} onClick={form.submit}>
        保存
      </AtButton>
    </Form>
  );
};

export default TargetCondition;
